<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h3>All images with <code>data-src</code> load when become visible.</h3>
<h1>Solar system</h1>
<p>The Solar System is the gravitationally bound system comprising the Sun and the objects that
orbit it, either directly or indirectly. Of those objects that orbit the Sun directly,
the largest eight are the planets, with the remainder being significantly smaller objects,
such as dwarf planets and small Solar System bodies.
Of the objects that orbit the Sun indirectly, the moons,
two are larger than the smallest planet, Mercury.</p>
<p>The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant
interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most
of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus,
Earth and Mars, are terrestrial planets, being primarily composed of rock and metal.
The four outer planets are giant planets, being substantially more massive than the terrestrials.
The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium;
the two outermost planets, Uranus and Neptune, are ice giants,
being composed mostly of substances with relatively high melting points compared with hydrogen
and helium, called volatiles, such as water, ammonia and methane.
All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/planets.jpg" width="640" height="360">
</figure>
<h1>Sun</h1>
<p>The Sun is the Solar System's star and by far its most massive component.
Its large mass (332,900 Earth masses) produces temperatures and densities in its core
high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star.
This releases an enormous amount of energy,
mostly radiated into space as electromagnetic radiation peaking in visible light.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/sun.jpg" width="658" height="658">
</figure>
<h1>Mercury</h1>
<p>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet
in the Solar System (0.055 Earth masses).
Mercury has no natural satellites; besides impact craters, its only known geological features
are lobed ridges or rupes that were probably produced by a period of contraction early in
its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its
surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet
been adequately explained. Hypotheses include that its outer layers were stripped off by a
giant impact; or, that it was prevented from fully accreting by the young Sun's energy.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/mercury.jpg" width="390" height="390">
</figure>
<h1>Venus</h1>
<p>Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth,
has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of
internal geological activity. It is much drier than Earth, and its atmosphere is ninety times
as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures
over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere.
No definitive evidence of current geological activity has been detected on Venus,
but it has no magnetic field that would prevent depletion of its substantial atmosphere,
which suggests that its atmosphere is being replenished by volcanic eruptions.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/venus.jpg" width="390" height="390">
</figure>
<h1>Earth</h1>
<p>Earth (1 AU from the Sun) is the largest and densest of the inner planets,
the only one known to have current geological activity, and the only place where life
is known to exist. Its liquid hydrosphere is unique among the terrestrial planets,
and it is the only planet where plate tectonics has been observed.
Earth's atmosphere is radically different from those of the other planets,
having been altered by the presence of life to contain 21% free oxygen.
It has one natural satellite, the Moon, the only large satellite of a terrestrial planet
in the Solar System.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/earth.jpg" width="390" height="390">
</figure>
<h1>Mars</h1>
<p>Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses).
It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars
(roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes,
such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological
activity that may have persisted until as recently as 2 million years ago.
Its red colour comes from iron oxide (rust) in its soil.
Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/mars.jpg" width="390" height="390">
</figure>
<h1>Jupiter</h1>
<p>Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together.
It is composed largely of hydrogen and helium.
Jupiter's strong internal heat creates semi-permanent features in its atmosphere,
such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites.
The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets,
such as volcanism and internal heating.
Ganymede, the largest satellite in the Solar System, is larger than Mercury.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/jupiter.jpg" width="390" height="390">
</figure>
<h1>Saturn</h1>
<p>Saturn (9.5 AU), distinguished by its extensive ring system,
has several similarities to Jupiter, such as its atmospheric composition and magnetosphere.
Although Saturn has 60% of Jupiter's volume, it is less than a third as massive,
at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water.
The rings of Saturn are made up of small ice and rock particles.
Saturn has 62 confirmed satellites composed largely of ice.
Two of these, Titan and Enceladus, show signs of geological activity.
Titan, the second-largest moon in the Solar System, is larger than Mercury
and the only satellite in the Solar System with a substantial atmosphere.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/saturn.jpg" width="805" height="390">
</figure>
<h1>Uranus</h1>
<p>Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets.
Uniquely among the planets, it orbits the Sun on its side;
its axial tilt is over ninety degrees to the ecliptic.
It has a much colder core than the other giant planets and radiates very little heat into space.
Uranus has 27 known satellites, the largest ones being Titania,
Oberon, Umbriel, Ariel, and Miranda.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/uranus.jpg" width="390" height="390">
</figure>
<h1>Neptune</h1>
<p>Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths)
and hence more dense. It radiates more internal heat,
but not as much as Jupiter or Saturn.
Neptune has 14 known satellites. The largest, Triton, is geologically active,
with geysers of liquid nitrogen.
Triton is the only large satellite with a retrograde orbit.
Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans,
that are in 1:1 resonance with it.</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/InternetSlowdown_Day.gif" data-src="https://en.js.cx/clipart/solar/neptune.jpg" width="390" height="390">
</figure>
<script>
/**
* Tests if the element is visible (within the visible part of the page)
* It's enough that the top or bottom edge of the element are visible
*/
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
// top elem edge is visible OR bottom elem edge is visible
let topVisible = coords.top > 0 && coords.top < windowHeight;
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}
/**
A variant of the test that considers the element visible if it's no more than
one page after/behind the current screen.
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
let extendedTop = -windowHeight;
let extendedBottom = 2 * windowHeight;
// top visible || bottom visible
let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
return topVisible || bottomVisible;
}
*/
function showVisible() {
for (let img of document.querySelectorAll('img')) {
let realSrc = img.dataset.src;
if (!realSrc) continue;
if (isVisible(img)) {
// disable caching
// this line should be removed in production code
realSrc += '?nocache=' + Math.random();
img.src = realSrc;
img.dataset.src = '';
}
}
}
window.addEventListener('scroll', showVisible);
showVisible();
</script>
